<template>
  <div style="width: 100%;height: 350px;">
    <el-row style="">
      <el-col :span="14">
        <div style="display: flex;">
          <div style="height: 300px;width: 200px;margin-bottom: auto;margin-top: auto;margin-left: 1%">
            <img style="width: 100%;height: 100%;object-fit:cover" :src="myData.bookPicture">
          </div>
          <div style="margin-left: 3%;width: 400px;height: max-content;font-size: 18px;
              margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.bookName }}
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            ￥ {{ myData.price }}
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="height: 300px;display: flex;">
          <div style="margin-top: auto;margin-bottom: auto;color: #7a7777;">
            <el-input-number v-model="myData.quantity" :min="1" :max="100" @change="handleChange" />
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            ￥ {{ total }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider border-style="dotted" style="width: 90%;margin-left: auto;margin-right: auto" />
  </div>
</template>

<script setup>

import {computed} from "vue";

const myProps = defineProps({
  myData: {
    type: Object,
    default: {
      bookId: 1,
      bookName: "论炳勋",
      bookPicture: "",
      price: 1,
      quantity: 1,
    }
  }
})

const total = computed(() => {
  return (myProps.myData.price * myProps.myData.quantity).toFixed(2);
})

</script>

<style scoped>

</style>
